<!-- 超文本标记性语音或超文本链接标示语音 -->
<!DOCTYPE html>
<!-- 网页中的文字采用中文 -->
<html lang="zh-CN">
  <!-- 头部区域 -->
  <head>
    <!-- 字符编码类型   utf-8=可变长度字符编-->
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">
    <!-- 定义文档的标题 -->
    <title>Function start</title>
    <!-- 样式 -->
    <style>
      /* 类的名称 */
      .msgBox {
        /* 绝对定位 */
        position: absolute;
        /* 顶部 */
        top: 50%;
        /* 靠左 */
        left: 50%;
        /* 旋转，缩放，倾斜或平移给定元素：元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少 */
        transform: translate(-50%,-50%);
        /* 设置元素的宽度 */
        width: 200px;
        /* 设置所有背景属性 */
        background: #eee;
        /* 设置各种单独边界的属性 */
        border: 2px solid #ff0000;
        /* 设置外边框圆角 */
        border-radius: 10%;
        font-size: 10%;
      }

      .msgBox p {
        /* 设置多行文本的间距 */
        line-height: 1.5;
        /* 设置内边距区域 */
        padding: 10px 20px;
        /* 颜色 */
        color: #333;
      }

      .msgBox button {
        /* 把所有属性初始化 */
        background: none;
        /* 没有边框 */
        border: none;
        position: absolute;
        /* 让子盒子四边与父容器间距为0 */
        top: 0;
        right: 0;
        /* 字体大小：rem(相对于根元素的字体大小的单位) */
        font-size: 1.1rem;
        color: #aaa;
      }

      div {
        font-size: 20px;
      }

      div {
        font-size: 40px;
      }

      div {
        color: red;
      }

      div.blue {
        color: blue;
      }
    </style>
  </head>
  <!-- 表示文档的内容 -->
  <body>
    <div>111</div>
    <div class="blue">111</div>
    <div>111</div>
    <div>111</div>
    <div>111</div>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>222</span>
    <span>333</span>
    <div>444</div>
    <!-- 可点击的按钮 -->
    <button id="btnDisplay">Display message box</button>
    <!-- <div class="msgBox">
      <p>This is a message box</p>
      <button>x</button>
    </div> -->
    <!-- 用于嵌入或引用可执行脚本 -->
    <script>
      // 关键字  函数名称  该函数为空列表  {....}为表达式
      function displayMessage(){
        // 关键字常量  变量 = 作为网页内容的入口，DOM树.用于选取 html 中的节点
        const html = document.querySelector('html');
              //  名称=         、.用于创建一个由标签名称 tagName 指定的 HTML 元素（元素）
        const panel = document.createElement('div');
            //名称 .设置指定元素上的某个属性值(属性类型，属性值)
        panel.setAttribute('class', 'msgBox');
          // 添加元素到HTML中（元素）
        html.appendChild(panel);

        const msg = document.createElement('p');
        // 变量.设置或返回属性的文本内容=文本内容
        msg.textContent = 'This is a message box';
        panel.appendChild(msg);

        const closeBtn = document.createElement('button');
        closeBtn.textContent = 'x';
        panel.appendChild(closeBtn);
                  // .点击事件=函数
        closeBtn.onclick = function() {
                // .指定节点的父节点.从 DOM 中删除一个子节点。返回删除的节点
          panel.parentNode.removeChild(panel);
        }
      }

      const btn = document.querySelector('#btnDisplay');
      // btn给元素指定事件处理程序（"事件“，函数处理，布尔类型）
      btn.addEventListener('click', displayMessage, false);
      // btn的点击事件
      btn.click();
    </script>
    <!-- <div class="msgBox"> 
      <p>This is a message box</p>
      <button>
        x
      </button>
    </div> -->
  </body>
</html>

